<template>
    <router-view></router-view>
    <tm-tabBar :options="tabBarOptions">
        <tm-tabBar-item activePath="/">
            <template #icon>
                <i class="iconfont icon-home"></i>
            </template>
            <template #title>
                <div class="tm-tabBar_item_title">首页</div>
            </template>
        </tm-tabBar-item>
        <tm-tabBar-item activePath="/component">
            <template #icon>
                <i class="iconfont icon-appstore"></i>
            </template>
            <template #title>
                <div class="tm-tabBar_item_title">组件</div>
            </template>
        </tm-tabBar-item>
        <tm-tabBar-item activePath="/template">
            <template #icon>
                <i class="iconfont icon-user"></i>
            </template>
            <template #title>
                <div class="tm-tabBar_item_title">模板</div>
            </template>
        </tm-tabBar-item>
        <tm-tabBar-item activePath="/about">
            <template #icon>
                <i class="iconfont icon-user"></i>
            </template>
            <template #title>
                <div class="tm-tabBar_item_title">关于</div>
            </template>
        </tm-tabBar-item>
    </tm-tabBar>
    <tm-back-top :bottom="100" :zIndex="100" activeValue="100" />
</template>

<script>
import { provide, reactive, toRefs } from 'vue'
import TmTabBar from '@tomatoUi/components/tab-bar/index.vue'
import TmTabBarItem from '@tomatoUi/components/tab-bar/item.vue'
import TmBackTop from '@tomatoUi/components/back-top/index.vue'
export default {
    name: 'home',
    components: {
        TmTabBar,
        TmTabBarItem,
        TmBackTop
    },
    setup() {
        const state = reactive({
            tabBarOptions: {
                textColor: '#A3A4A5',
                activeTextColor: '#00A19D'
            }
        })

        provide('tabBarOptions', state.tabBarOptions)

        return {
            ...toRefs(state)
        }
    }
}
</script>
<style lang="scss">
    #app {}
</style>